<template>
	<view class="container">
		<view class="title-top">
			中考志愿填报助手
		</view>
		<view class="input-box2">
			<view class="input-item">
				<view class="inpuit-text" v-show="!form.school">
					请输选择学校
				</view>
				<view class="inpuit-text" style="color:#000000 ;" v-show="form.school">
					{{form.school}}
				</view>
				<view @click="show = true">
					<image src="@/static/done.png" mode="" class="done-img"></image>
				</view>
			</view>
		</view>



		<view class="input-box">
			<view class="input-item">
				<input class="inpuit-text" placeholder="请输入成绩" v-model="form.score" type="number" maxlength="3" />
				<view @click="ongo">
					<image src="@/static/go.png" mode="" class="go-img"></image>
				</view>
			</view>
		</view>
		<view class="button">
			<image src="@/static/user.png" mode="" class="user-img"></image>
			<view class="button-text">
				1对1咨询专家
			</view>

		</view>
		<up-picker :show="show" :columns="cateList" @confirm="confirm" @cancel="cancel"></up-picker>

	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue';

	import { getschool, getInfo } from '@/api/index';
	import { computed, reactive, onMounted, type CSSProperties } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	//引入pinia
	import { useTokenStore, useUserStore } from '@/stores';
	const show = ref(false);

	//调用pinia中的token方法

	const tokenStore = useTokenStore()

	const useUser = useUserStore()
	const cateId = ref('')

	// let cateList = new Array<any>()
	const cateList = reactive([

	])
	const form = reactive({
		school: '',
		score: '',
	});
	// 方法  
	const selectItem = (item) => {
		console.log(item);
	};

	const ongo = () => {
		if (!form.score) {
			uni.showToast({
				title: '请输入成绩',
				icon: 'none',
			});
			return;
		}
		uni.navigateTo({ url: '/pages/AI_inquiry/index?score=' + form.score + '&school=' + form.school });
	};

	onMounted(() => {
	});
	interface HistoryData {
	}
	const getuser = () => {
		getInfo().then(res => {
			console.log(res, '用户信息')
			//pinia 持久化token信息
			useUser.setUserInfo(res.user);
		})
	}

	const datalist = ref<HistoryData[]>([]); // 存储历史数据
	//onshow方法
	onShow(() => {
		console.log(tokenStore.accessToken, '什么信息')
		if (!tokenStore.accessToken) {
			uni.showToast({
				title: '请先登录',
				icon: 'none',
			});
			uni.navigateTo({ url: 'pages/login/login' });
		} else {
			getschool().then(res => {
				cateList.push([])
				datalist.value = res.data
				for (let i = 0; i < datalist.value.length; i++) {
					cateList[0].push(datalist.value[i].schoolNameZh)
					// cateList[0]= [...cateList[0], datalist.value[i].schoolNameZh]
				}
			})
			console.log('onshow。。。。。。。。。')
			getuser()
		}

	})

	const confirm = (e) => {
		console.log('confirm', e);
		form.school = e.value[0]
		show.value = false;
	};
	const cancel = (e) => {
		console.log('取消');
		show.value = false;
	};


	onLoad(() => {
		console.log('onLoad。。。。。。。。。')
	})
</script>

<style lang="scss" scoped>
	.container {
		// background-color: red;
		background-image: url('https://cw.jxfs365.com/appZhongKao/index-bg.png');
		background-size: cover;
		background-position: center;
		/* 可选，确保图片居中 */
		background-repeat: no-repeat;
		/* 可选，确保背景图片不重复 */
		height: 100vh;
		/* 设置body的高度为视口高度的100%，确保背景覆盖整个页面 */
		margin: 0;
		/* 移除默认的margin */
		padding: 0;
		/* 移除默认的padding */

		.title-top {
			text-align: center;
			padding-top: 107rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 40rpx;
			color: #000000;

		}

		.selected-box {
			position: absolute;
			top: 397rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			width: 700rpx;
			height: 191rpx;
			padding: 8rpx;
			background: linear-gradient(0deg, #9873EB, #3758DE);
			border-radius: 40rpx;

			.input-item {
				height: 100%;
				border-radius: 40rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 40rpx;
				padding-right: 20rpx;

				.inpuit-text {
					width: 350rpx;
					height: 58rpx;
					font-family: Microsoft YaHei;
					font-weight: 300;
					font-size: 60rpx;
					color: #A2A2A2;
				}

				.done-img {
					width: 36rpx;
					height: 20rpx;
					margin-right: 20rpx;
				}
			}

		}

		.input-box {
			position: absolute;
			top: 657rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			width: 700rpx;
			height: 191rpx;
			padding: 8rpx;
			background: linear-gradient(0deg, #9873EB, #3758DE);
			border-radius: 40rpx;

			.input-item {
				height: 100%;
				border-radius: 40rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 40rpx;
				padding-right: 20rpx;

				.inpuit-text {
					width: 350rpx;
					height: 58rpx;
					font-family: Microsoft YaHei;
					font-weight: 300;
					font-size: 60rpx;
					color: #A2A2A2;
				}

				.go-img {
					width: 141rpx;
					height: 141rpx;
				}
			}

		}

		.input-box2 {
			position: absolute;
			top: 397rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			width: 700rpx;
			height: 191rpx;
			padding: 8rpx;
			background: linear-gradient(0deg, #9873EB, #3758DE);
			border-radius: 40rpx;

			.input-item {
				height: 100%;
				border-radius: 40rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 40rpx;
				padding-right: 20rpx;

				.inpuit-text {
					// width: 350rpx;
					// height: 58rpx;
					font-family: Microsoft YaHei;
					font-weight: 300;
					font-size: 40rpx;
					color: #A2A2A2;
				}

				.done-img {
					width: 36rpx;
					height: 20rpx;
					margin-right: 20rpx;
				}
			}

		}


		.button {
			display: flex;
			align-items: center;
			text-align: center;
			// width: 284rpx;
			// height: 69rpx;
			background: #FFFFFF;
			border-radius: 34rpx;
			border: 1px solid #E8E9F0;
			position: fixed;
			bottom: 140rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 10rpx 15rpx;
			text-align: center;
			/* 文本居中 */
			/* 内边距 */

			.user-img {
				width: 36rpx;
				height: 36rpx;
			}

			.button-text {
				padding-left: 10rpx;
				width: 165rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;

			}

		}

	}
</style>